<template>
  <div class="relative w-full overflow-hidden rounded-2xl ring-1 ring-white/10 bg-white/5">
    <!-- Slides -->
    <div
      class="flex transition-transform duration-700 ease-out"
      :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
      @mouseenter="pause"
      @mouseleave="resume"
      @touchstart.passive="onTouchStart"
      @touchmove.passive="onTouchMove"
      @touchend.passive="onTouchEnd"
    >
      <div
        v-for="(s, i) in resolvedSlides"
        :key="i"
        class="relative shrink-0 w-full h-[340px] md:h-[520px]"
        role="group"
        :aria-roledescription="`slide ${i+1} of ${resolvedSlides.length}`"
      >
        <!-- Background image -->
        <img :src="s.src" :alt="s.alt || s.title || 'Slide'" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <!-- Subtle dark vignette -->
        <div class="absolute inset-0 bg-gradient-to-br from-black/50 via-black/30 to-emerald-900/20"></div>
        <!-- Content -->
        <div class="relative h-full container-fluid flex items-center">
          <div class="max-w-2xl">
            <p v-if="s.kicker" class="kicker mb-4">{{ s.kicker }}</p>
            <h2 class="text-4xl md:text-6xl font-extrabold tracking-tight leading-[1.05] text-white">{{ s.title }}</h2>
            <p v-if="s.desc" class="mt-4 text-white/70 text-base md:text-lg leading-7 md:leading-8">{{ s.desc }}</p>
            <div v-if="s.actions && s.actions.length" class="mt-8 flex flex-wrap gap-3">
              <router-link
                v-for="(a, ai) in s.actions"
                :key="ai"
                :to="a.to"
                :class="a.primary ? 'btn-primary' : 'btn-outline'"
              >
                {{ a.text }}
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Arrows -->
    <button v-if="showArrows" class="btn-circle absolute left-4 top-1/2 -translate-y-1/2" @click="prev" aria-label="上一张">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
        <path fill-rule="evenodd" d="M15.78 3.97a.75.75 0 0 1 0 1.06L9.81 11l5.97 5.97a.75.75 0 0 1-1.06 1.06l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
      </svg>
    </button>
    <button v-if="showArrows" class="btn-circle absolute right-4 top-1/2 -translate-y-1/2" @click="next" aria-label="下一张">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
        <path fill-rule="evenodd" d="M8.22 20.03a.75.75 0 0 1 0-1.06L14.19 13 8.22 7.03a.75.75 0 1 1 1.06-1.06l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd" />
      </svg>
    </button>

    <!-- Dots -->
    <div v-if="showDots" class="absolute inset-x-0 bottom-4 flex items-center justify-center gap-2">
      <button
        v-for="(s, i) in resolvedSlides"
        :key="i"
        :class="['w-2.5 h-2.5 rounded-full transition-all', i === currentIndex ? 'bg-emerald-400 w-6' : 'bg-white/40 hover:bg-white/70']"
        @click="go(i)"
        :aria-label="`切换到第 ${i+1} 张`"
      ></button>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'

const props = defineProps({
  slides: { type: Array, default: () => [] },
  autoplay: { type: Boolean, default: true },
  interval: { type: Number, default: 4000 },
  loop: { type: Boolean, default: true },
  showDots: { type: Boolean, default: true },
  showArrows: { type: Boolean, default: true },
})

const fallback = [
  {
    kicker: "FRESH · FRUITS",
    title: "鲜果严选 · 鲜甜到家",
    desc: "产地直发，冷链保鲜。多品类组合，营养与口感兼得。",
    src: "/images/hero-abstract.svg",
    actions: [
      { text: "立即选购", to: { path: '/', hash: '#products' }, primary: true },
      { text: "浏览分类", to: { path: '/', hash: '#categories' } },
    ],
  },
  {
    kicker: "SEASONAL · PICKS",
    title: "当季鲜果 · 次日到达",
    desc: "源头直采，冷链直达。每一口都鲜甜脆爽。",
    src: "/images/apple.svg",
    actions: [
      { text: "去逛逛", to: { path: '/', hash: '#products' }, primary: true },
    ],
  },
]

const resolvedSlides = computed(() => props.slides.length ? props.slides : fallback)

// 当前索引：指向正在展示的幻灯片
const currentIndex = ref(0)
let timer = null
// 下一张：若到末尾则根据 loop 回到开头
function next(){
  if (currentIndex.value < resolvedSlides.value.length - 1) currentIndex.value++
  else if (props.loop) currentIndex.value = 0
}
// 上一张：若到开头则根据 loop 跳到最后
function prev(){
  if (currentIndex.value > 0) currentIndex.value--
  else if (props.loop) currentIndex.value = resolvedSlides.value.length - 1
}
// 跳转到指定索引
function go(i){ currentIndex.value = i }
// 自动播放：基于 interval 周期切换；变更 slides/interval/autoplay 时重启
function start(){
  if (!props.autoplay) return
  stop()
  timer = setInterval(next, props.interval)
}
// 停止自动播放并清理计时器
function stop(){ if (timer) { clearInterval(timer); timer = null } }
// 悬停暂停/移出恢复
function pause(){ stop() }
function resume(){ start() }
// 触摸滑动：记录起点 x；松手时根据位移正负判断前进/后退
const startX = ref(0)
function onTouchStart(e){ startX.value = e.changedTouches[0].clientX; pause() }
function onTouchMove(e){ /* 保留空实现以使用 passive 监听，提高滚动性能 */ }
function onTouchEnd(e){
  const dx = e.changedTouches[0].clientX - startX.value
  if (Math.abs(dx) > 40) { dx < 0 ? next() : prev() }
  resume()
}
// 挂载时启动，卸载时停止；依赖变化时重启
onMounted(start)
onBeforeUnmount(stop)
watch(() => [props.slides, props.interval, props.autoplay], start, { deep: true })
</script>

<style scoped>
</style>